<template>
  <div class="editor">
    <quill-editor
      theme="snow"
      v-model:content="content"
      contentType="html"
      ref="editorRef"
    ></quill-editor>
  </div>
</template>
<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { computed, ref } from 'vue'
const editorRef = ref()
const props = defineProps({
  modelValue: {
    type: String
  }
})
const readycontent = () => {
  editorRef.value.setHTML('')
}
const emit = defineEmits(['update:modelValue'])
let content = computed({
  get: () => {
    return props.modelValue
  },
  set: (value) => {
    emit('update:modelValue', value)
  }
})
defineExpose({
  readycontent
})
</script>

<style scoped lang="scss">
.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>
